<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/* 1.控制字体：font-family指定字体家庭属性 */
			{
				/* 免费：微软雅黑、楷体、sans-serif'无衬线字体'等同于黑体、宋体.. */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑存在字体，按照顺序选择执行,二选一，就近原则 */
				/* font-size字体尺寸属性：px 绝对值--pc  em：相对于父元素字体倍数调整--移动端 */
				font-size: 1.5em;
				/* font-weight字体加粗属性  属性值：数值【整数】   100 细~900 粗
				                                  英文      normal=400、bold=900 */
				font-weight: 900;
				/* font-style字体样式属性 */
				font-style: italic;
				/* text-transform字体转换属性:属性值 uppercase 转大写
				                                   lowercase 转小写
												   capitalize 首字符转大写
				 */
				text-transform: uppercase;
				text-transform: lowercase;
				text-transform: capitalize;
				/* text-indent 文本块首行缩进属性：属性值  数值px */
				text-indent: 200px;
			}
			/* 2.控制文本布局 */
			h 1+p{
				border: 1px solid red;
				/* text-align文本对齐属性：属性值：left|right|center [空间宽度]
				                                 justify  两端对齐【文本占满空间】
												 左右布局*/
				 text-align: center;
				 text-align: justify;
				 /* line-height行高属性：属性值：数值px  针对文本行高,文本垂直居中 */
				 height: 40px;
				 line-height: 40px;
				 /* 文本垂直居中：高度与行高一致 */
				 /* letter-spacing字符间距属性：属性值 【正负】数值px */
				 letter-spacing: -1px;
				 /* word-spacing单词间距属性：属性值 【正负】数值px */
				 word- spacing: 10px;
			}
			/* 3.文本装饰效果 */
			p a{
				border: 1px solid #6d6d6d;
				padding: 6px 10px;
				border-radius: 3px;
				margin-left: 10px;
			}
			/* 默认效果：去边框，下划线去掉 */
			p a.current{
				border: 0;
				/* text-decoration超链接效果属性：属性值 none 去掉下划线
				                                    underline默认有下划线
													line-throught 删除线
				 */
				text-decoration: none;
				text-decoration: underline;
				text-decoration: line-through;
				color: #000;
			}
			p>span{
				bor der: 1px solid red;
				/* text-shadow文本阴影属性        阴影：①滤镜：下阴影 ②文本阴影 ③盒子阴影 */
				/*      属性值：X Y 模糊距离 颜色 */
				text-shadow: 5px 5px 5px #00ffff;
			}
			/* 4.文本换行属性 */
			h1~span{
				border:1px solid red;
				/* white-space文本换行属性：nowrap 一行显示，添加回车，显示效果：存在空格
				                           pre    保留空格与回车
										   normal 默认 空格合并，自动换行
				 */
				whi te-space: nowrap;
				whi te-space: pre;
				white-space: normal;
			}
			
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：针对文本和字体，四种效果：
		     ①控制字体：font-family、font-size、font-weight等
			 ②控制文本布局：text-align、line-height、letter-spacing等
			 ③控制文本装饰效果：text-decoration、text-shadow等
			 ④控制文本溢出和换行：overflow、white-space、
		 -->
		 <h1>文本格式化属性：控制字体</h1>
		 Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quidem accusamus ex accusantium iusto quia expedita fuga voluptates perferendis? Nesciunt ex nobis alias ipsa voluptas est aut iusto accusamus maxime?
	     <h1>控制文本布局：文本</h1>
	     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, non blanditiis ipsum molestias velit dolor vitae asperiores, eligendi quisquam necessitatibus aperiam voluptas quas animi aut cum? Earum tempora minima ipsum.</p>
	     <h1>文本装饰效果</h1>
		 <p>
			 <a href="#" class="current">1</a>
			 <a href="#">2</a>
			 <a href="#">3</a>
			 <a href="#">4</a>
			 <a href="#">5</a>
			 <a href="#">6</a>
			 <span>测试文本阴影</span>
		 </p>
		 <h1>文本换行属性</h1>
		 <span>L         ore
		 m ipsum do  lor sit amet consectetur, adipisicing elit. Totam rerum commodi animi facere ea eius voluptatum explicabo enim, tempore in nam consectetur nobis atque velit soluta sequi quos porro iure!</span>
	</body>
</html>